<!--
 * @Author: ChenCaoYang
 * @Date: 2021-05-26 22:36:01
 * @LastEditors: helei
 * @LastEditTime: 2021-06-01 11:13:54
-->
<template>
  <div class="container">
    <div class="collection_of_goods">
      <div
        class="product_list"
        v-for="(item, index) in productData"
        :key="index"
      >
        <div class="product_image">
          <img :src="item.titlePicUrl" />
        </div>
        <div class="product_info">
          <p>{{ item.productName }}</p>
          <!-- <p>{{ item.info }}</p> -->
        </div>
        <div class="buy" @click="toDetails(item)">立即购买</div>
      </div>
      <!-- 分页 -->
      <div class="footer">
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          background
          layout="prev, pager, next"
          :total="total"
          hide-on-single-page
          @current-change="currentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { get_data } from "../../../../utils/utils"
export default {
  name: "CollectionOfGoods",
  data() {
    return {
      total: 0,
      productData: [],
      pageParam: {
        page: 1,
        rows: 10,
        customerId: "",
      },
    };
  },
  created() {
    if (get_data("userInfo")) {
      let userinfo = JSON.parse(get_data("userInfo"));
      this.pageParam.customerId = userinfo.id;
    } else {
      this.$router.push({
        path: "/login",
      });
      return;
    }
    this.getCollectList();
  },
  methods: {
    toDetails(item) {
      this.$router.push({
        path: "/counsel/travel",
        query: {
          id: item.id,
        },
      });
    },
    currentChange(current) {
      this.pageParam.page = current;
      this.getCollectList();
    },
    getCollectList() {
      this.$http
        .fetch(this.$apiPath.getCollectList, {
          method: "get",
          params: this.pageParam,
        })
        .then((res) => {
          this.productData = res.data.records;
          this.total = res.data.total;
        });
    },
  },
};
</script>

<style lang="less">
.container {
  width: 100%;
  .collection_of_goods {
    padding: 0 20px 30px 20px;
    .product_list {
      height: 160px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #dddddd;
      position: relative;
      .product_image {
        width: 100px;
        height: 100px;
        margin-right: 24px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .product_info {
        height: 48px;
        p:first-child {
          font-size: 14px;
          font-family: PingFangSC;
          font-weight: 400;
          color: #666666;
          margin-bottom: 19px;
        }
        p:last-child {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #999999;
        }
      }
      .buy {
        width: 80px;
        cursor: pointer;
        height: 30px;
        background: #cf975a;
        border-radius: 15px;
        position: absolute;
        right: 0;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        line-height: 30px;
      }
    }
    .footer {
      padding: 0;
      margin: 0 auto;
      margin-top: 30px;
      margin-bottom: 33px;
      background-color: #ffffff;
      .btn-prev {
        width: 74px;
        height: 30px;
        border: 1px solid #c7c7c7;
        border-radius: 15px;
      }
      .btn-next {
        width: 74px;
        height: 30px;
        border: 1px solid #c7c7c7;
        border-radius: 15px;
        color: #999999;
      }
      .el-pager li {
        width: 30px;
        height: 30px;
        border: 1px solid #c7c7c7;
        border-radius: 15px;
        color: #999999;
      }
      .el-pager {
        .number {
          text-align: center;
          padding: 0;
        }
        //   .number:hover {
        //     color: #999999 !important;
        //   }
        li:not(.active).number:hover {
          color: #999999 !important;
        }
      }
      .el-pager li:not(.disabled).active {
        background-color: #cf975a;
      }
    }
  }
}
</style>
